<template>
    <div class="category-select">
        <div class="select-controller" ref="categorySelectController"
            :class="isShowPop ? 'select-controller-selecting' : ''" @click="isShowPop = !isShowPop">
            <p class="select-item-inserted">{{ category[0].name }} → {{ category[1].name }}</p>
            <i class="iconfont icon-xiajiantou" :class="isShowPop ? 'selecting-icon' : ''"></i>
        </div>
        <div class="drop-container" ref="categoryPop" :style="isShowPop ? '' : 'display: none;'">
            <div class="drop-main">
                <div v-if="categoryList.length != 0">
                    <div class="drop-main-item" :class="main == index ? 'drop-main-item-selected' : ''"
                        v-for="(item, index) in categoryList" :key="index" @click="selectMain(index)">{{ item.mcName }}
                    </div>
                </div>

            </div>
            <div class="drop-sub" v-if="categoryList.length != 0">
                <div class="drop-sub-item" v-for="(item, index) in categoryList[main].scList" :key="index"
                    @click="changeCategory(index)">
                    <p class="item-name"
                        :class="category[0].id == item.mcId && category[1].id == item.scId ? 'drop-sub-item-selected' : ''">
                        {{ item.scName }}</p>
                    <p class="item-descr" v-if="item.descr">{{ item.descr }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useUserStore } from '@/store/user';

const userStore = useUserStore();

// 定义响应式数据
const isShowPop = ref(false)
const main = ref(0)   // 选中主分区在categoryList中的index 控制pop的显示
const sub = ref(0)    // 选中子分区在categoryList中的index 控制pop的显示

// props 定义
const props = defineProps({
    category: {
        type: Array,
        default: () => [{ id: "anime", name: "番剧" }, { id: "finish", name: "完结动画" }]
    }
})

// computed 属性：获取分区列表
const categoryList = computed(() => {
    return userStore.channels
})

const categorySelectController = ref(null)
const categoryPop = ref(null)

// methods：点击空白处关闭气泡
const handleOutsideClick = (event) => {
    const csc = categorySelectController.value
    const cp = categoryPop.value
    if (!csc.contains(event.target) && !cp.contains(event.target)) {
        isShowPop.value = false
    }
}

// 点击主分类的回调
const selectMain = (mainIndex) => {
    main.value = mainIndex
    const dm = document.querySelector('.drop-main')
    const dmis = document.querySelector('.drop-main-item')
    dm.scrollTo({
        behavior: "smooth",
        top: dmis.clientHeight * mainIndex, // 滚动mainIndex个元素高度
    })
}

const emit = defineEmits(["update:Category"]);

// 点击子分类的回调
const changeCategory = (subIndex) => {
    sub.value = subIndex
    const selectedMain = { id: categoryList.value[main.value].mcId, name: categoryList.value[main.value].mcName }
    const selectedSub = { id: categoryList.value[main.value].scList[sub.value].scId, name: categoryList.value[main.value].scList[sub.value].scName }
    emit('update:Category', [selectedMain, selectedSub]) // 将分区更新回父组件
    isShowPop.value = false
}

// 页面渲染后创建点击事件的监听器
onMounted(() => {
    window.addEventListener("click", handleOutsideClick)
})

// 页面销毁前清除点击事件的监听器
onBeforeUnmount(() => {
    window.removeEventListener("click", handleOutsideClick)
})
</script>

<style scoped>
.category-select {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.select-controller {
    padding: 7px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    min-width: 200px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #99a2aa;
    transition: border .3s ease;
    background: #fff;
}

.select-controller:hover {
    border-color: var(--brand_pink);
}

.select-controller-selecting {
    border-color: var(--brand_pink);
}

.icon-xiajiantou {
    transition: transform 0.3s;
}

.selecting-icon {
    transform: rotate(180deg);
}

.select-item-inserted {
    color: #222;
    line-height: 22px;
    height: 22px;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
}

.drop-container {
    background: #fff;
    border: 1px solid #e5e9ef;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 46px;
    z-index: 10;
    display: flex;
}

.drop-main {
    padding: 12px 0;
    width: 128px;
    height: 264px;
    overflow-x: hidden;
    overflow-y: auto;
}

.drop-main-item {
    padding: 12px 24px;
    width: 128px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drop-sub {
    border-left: 1px solid #e5e9ef;
    padding-top: 12px;
    min-width: 256px;
    height: 264px;
    overflow-x: hidden;
    overflow-y: auto;
}

.drop-sub-item {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 128px;
}

.item-name {
    font-size: 14px;
    color: #212121;
    margin-right: 18px;
    white-space: nowrap;
}

.item-descr {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.drop-main-item:hover,
.drop-sub-item:hover {
    background-color: #f4f5f7;
}

.drop-main-item-selected,
.drop-sub-item-selected {
    color: var(--brand_pink);
}
</style>